(function () {
  let menu_list_move = Array.from(document.querySelectorAll(".Carousel_module_nav ul li"));

 
  
  // 自动增加背景宽度
  const menu_conent = function menu_conent(lis_num, menu_li) {
    num = parseInt(lis_num / 5) + 1;
    menu_li.style.width = `${num * 246}px`;
  }
  //menu_conent数据绑定
  const menu_render = function menu_conent(data) {
    let str = ''
    data.forEach(element => {
      let { pic, data_name } = element;
      str += `<li>
          <img src="${pic}" alt="">
          <div class="Trade_name">${data_name}</div>
        </li>`
    });
    str += `<li><img src="./img/chaImage.png" alt=""><span>查看更多</span></li>
    `
    return str;
  }
  // 获取数据
  axios.get("./json/menu_conent.json").then((result) => {
    let menuName = Object.keys(result.data);
    menuName.forEach((item) => {
      let menu_li = document.querySelector(`.menu_conent .${item}`)
      menu_li.innerHTML = menu_render(result.data[item])
      let lis_num = menu_li.querySelectorAll('li').length;
      menu_conent(lis_num, menu_li)
    })
  }).catch((err) => {
    console.log(err);
  });


  //事件绑定
  let move_list = Array.from(document.querySelectorAll(".menu_conent ul"))
  menu_list_move.forEach((item, index) => {
    item.onmouseenter = function () {
      move_list[index].style.display = "flex";
    }
    item.onmouseleave = function () {
      move_list[index].style.display = "none";
    }
  })

  /* 处理图片延迟加载的监听器 */
  let obLazy = new IntersectionObserver(changes => {
    
    // 循环判断每一个图片所在盒子，只要符合条件则延迟加载
    changes.forEach(item => {
      if (item.isIntersecting) {
        // 延迟加载
        let picBox = item.target,
          img = picBox.querySelector('img');
        img.src = img.getAttribute('src-data');
        img.onload = () => img.style.opacity = 1;
        obLazy.unobserve(picBox);
        // 额外加一个自定义属性「写在结构上」
        picBox.setAttribute('isload', 'true');
        console.log(1111);
        
      }
    });
  }, { threshold: [1] });

  //商品模块

  const render_shoping = function render_shoping(mode, Name) {
    let con_box = document.querySelector(`.${Name}_body ul`);
    let str = '';
    mode.forEach((item, index) => {
      let { pic, title, profile, Price, hot, characteristic } = item;

      str += `<li>
          <div class="imgbox">
            <img src=""  src-data="${pic}" alt="">
          </div>
          <div class="conentbox">
            <span class="title_name"><span>${hot}</span><h4>${title}</h4></span>
            <span class="profile">${profile}</span>
            <span class="Price">${Price}</span>
            <span class="characteristic">${characteristic.length == 1 ? (`<span>${characteristic[0]}</span>`) : (characteristic.length == 2 ? (`<span>${characteristic[0]}</span><span>${characteristic[1]}</span>`) : (characteristic.length == 3 ? (`<span>${characteristic[0]}</span><span>${characteristic[1]}</span><span>${characteristic[2]}</span>`) : ('')))}</span>
          </div>
        </li>`
    })
    con_box.innerHTML = str;
  }
  axios.get("./json/shop_conent.json").then(result => {
    let ent_con = Object.entries(result.data);
    ent_con.forEach((item, index) => {
      let key_name = item[0];
      let obj_name = item[1];
      render_shoping(obj_name, key_name);
    });

    let shoppinglis = document.querySelectorAll('.shopping_con_body ul li .imgbox:not([isload])');
    shoppinglis.forEach((item) => {
      obLazy.observe(item);
    })
  })

  

  /* ==========================倒计时模块===========================  */

  let clock = Array.from(document.querySelectorAll(".countDown span"));
  let addZero = function addZero(num) {
    return num < 10 ? "0" + num : num;
  }
  let getTime = function getTime() {
    let time = new Date();
    let hour = time.getHours();
    let minutes = time.getMinutes();
    let seconds = time.getSeconds();
    hour = addZero(23 - hour);
    minutes = addZero(59 - minutes);
    seconds = addZero(60 - seconds);
    let res = {
      hour,
      minutes,
      seconds,
    }
    return res;
  }
  setInterval(function () {
    let res = getTime();
    clock[0].innerHTML = res.hour;
    clock[1].innerHTML = res.minutes;
    clock[2].innerHTML = res.seconds;
  }, 1000)

  document.onscroll = function () {
    let sc = document.documentElement.scrollTop;
    let back_top = document.querySelector('.back_top');
    if (sc > 300) {
      back_top.style.display = 'flex';
    } else {
      back_top.style.display = 'none';
    }

  }



  
  








})();

// HUAWEI Pocket S
// Mate系列
// P系列
// nova系列
// 畅享系列
// 